<template>
  <div class="orderManagement-container">
    <vab-query-form>
      <vab-query-form-right-panel :span="24">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-date-picker
              v-model="daterange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              @change="changeDocDate"
              style="width: 300px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      class="table_list"
      ref="list"
      border
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      style="width: 100%"
    >
      <el-table-column show-overflow-tooltip align="center" min-width="50" type="selection"></el-table-column>
      <el-table-column show-overflow-tooltip align="left" min-width="150" prop="businessKey" label="单据号">
        <template #default="{ row }">
          <el-link :underline="false" type="text" @click="handleDetail(row)">{{ row.businessKey }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        align="center"
        min-width="100"
        prop="category"
        label="类型"
        :formatter="formatterCategory"
      ></el-table-column>
      <el-table-column show-overflow-tooltip align="center" width="100" prop="processStatus" label="流程状态">
        <template #default="{ row }">
          <el-tag v-if="row.processStatus == '0'" type="primary">已提交</el-tag>
          <el-tag v-if="row.processStatus == '1'" type="primary">审批中</el-tag>
          <el-tag v-else type="danger">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="name" label="任务名称"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" width="100" prop="approveAction" label="审批操作">
        <template #default="{ row }">
          <el-tag v-if="row.approveAction == '同意'" type="success">{{ row.approveAction }}</el-tag>
          <el-tag v-else type="danger">{{ row.approveAction }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="startUser" label="发起人"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="assignee" label="处理人"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="160" prop="durationInMillis" label="历时">
        <template #default="{ row }">
          <span>{{ $compoteFormatTime(row.startTime, row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" width="160" prop="startTime" label="开始时间"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" width="160" prop="endTime" label="结束时间"></el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <detail ref="detail"></detail>
  </div>
</template>

<script>
  import { getUserDoneTask } from '@/api/workflow/task'
  import { getList } from '@/api/workflow/modelCategory'
  import Detail from './components/Detail'
  export default {
    name: 'TaskDone',
    components: { Detail },
    data() {
      return {
        list: null,
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNum: 1,
          pageSize: 10,
        },
        daterange: undefined,
        selection: undefined,
        categoryList: [],
      }
    },
    created() {
      this.getModelCategory()
      this.fetchData()
    },
    methods: {
      changeDocDate(date) {
        if (date) {
          this.queryForm.startTime = this.$parseTime(date[0])
          this.queryForm.endTime = this.$parseTime(date[1])
        } else {
          this.queryForm.startTime = undefined
          this.queryForm.endTime = undefined
        }
      },
      handleDetail(row) {
        this.$refs['detail'].showEdit(row)
      },
      formatterCategory(row) {
        let categoetys = this.categoryList.filter((item) => item.categoryCode == row.category)
        if (categoetys && categoetys.length != 0) {
          return categoetys[0].categoryName
        }
        return row.category
      },
      async getModelCategory() {
        const { data } = await getList()
        this.categoryList = data
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getUserDoneTask(this.queryForm)
        this.list = data.list
        this.total = data.total
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style scoped>
  .table_list /deep/ .el-table__expanded-cell {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .table_list /deep/ .table_list_expand .el-table__header-wrapper th {
    background-color: #ffffff;
    padding: 2px 0;
    border: none;
  }
  .table_list /deep/ .table_list_expand .el-table__body-wrapper td {
    background-color: #ffffff;
    padding: 2px 0;
    border: none;
  }
</style>
